<template>
    <div class="catalog-component">
        <mu-list>
            <mu-list-item v-for="(ct,i) in catalogs" :key="i" :title="ct.mlmc">
                <mu-list-item slot="nested" v-for="(cts,j) in ct.sub" :key="j" :title="cts.mlmc">
                    <mu-icon slot="left" :class="cts.read == 1 ? 'actived':'' " :size="22" value="low_priority"/>
                    <mu-list-item slot="nested" v-for=" (ctsc,k) in cts.content" :key="k" :title="ctsc.nrmc" @click="changeContent(ctsc,cts,ct)">
                        <mu-icon :class="ctsc.read == 1 ? 'actived':'' " slot="left" :size="22" v-if="ctsc.nrlx =='mp4'" value="playlist_play"/>
                        <mu-icon :class="ctsc.read == 1 ? 'actived':'' " slot="left" :size="22" v-else="" value="playlist_add_check"/>
                    </mu-list-item>
                </mu-list-item>
            </mu-list-item>
        </mu-list>
    </div>
</template>

<script>

  export default {
    name: 'Catalog',
    computed: {
      catalogs() {
        return this.$store.state.catalog;
      }
    },
    mounted() {
      this.$store.dispatch('getCourseCatalog', this.$route.params.id)
    },
    data() {
      return {
      }
    },
    methods: {
      //点击素材，进行切换素材的操作
      changeContent(c,j,z) {
        console.log(c);
        console.log(j);
        console.log(z);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .catalog-component .mu-list {
        padding: 0px;
    }
    .catalog-component .mu-item {
        min-height: 30px;
    }
    .catalog-component .mu-item-left{
        width: 25px;
    }
    .catalog-component .mu-item-title {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-component .mu-item.show-left {
        padding-left: 40px;
        padding-top: 12px;
        padding-bottom: 12px;
        margin-left: -10px;
    }
    .catalog-component .mu-icon{ color: #aaa;}
    .catalog-component .mu-icon.actived{ color: red;}

</style>
